<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>学生管理</title>
		<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" />
		<link rel="stylesheet" type="text/css" href="../../static/css/me.css" th:href="@{/css/me.css}"/>
	</head>
	<body>
		<!-- 头部 -->
		<nav class="ui padded-t-small">
			<div class="ui container">
				<div class="ui secondary menu">
					<h2 class="ui blue header item">辅导员管理系统</h2>
					<div class="right menu m-item m-mobile-hide">
						<div class="ui dropdown item">
							<div class="text">
								<i class="user blue big icon"></i>
								<span th:text="${session.user.nickname}">123</span>
							</div>
							<i class="dropdown icon"></i>
							<div class="menu">
								<a href="#" th:href="@{/logout}" class="item">退出</a>
							</div>
						</div>
					</div>

				</div>
				<div class="ui secondary pointing three item demo menu">
					<a href="notice.html" th:href="@{/admin/notice}" class="item">公告管理</a>
					<a href="record.html" th:href="@{/admin/record}" class="item">考勤管理</a>
					<a href="infor.html" th:href="@{/admin/infor}" class="active item">学生信息</a>
				</div>
			</div>
		</nav>
		<!-- 主体 -->
		<div class="ui container margin-t-small">
			<div class="ui  segment">
				<form class="ui form">
					<input type="hidden" name="page" >
					<div class="inline fields">
						<div class="field">
							<input type="text" name="name" placeholder="姓名"/>
						</div>
						<div class="field">
							<input type="text" name="sno" placeholder="学号"/>
						</div>
						<div class="field">
							<div class="ui selection dropdown">
								<input type="hidden" name="grades"/>
								<i class="dropdown icon"></i>
								<div class="default text">班级</div>
								<div class="menu">
									<div class="item" data-value="计算机1701">
										计算机1701
									</div>
									<div class="item" data-value="计算机1702">
										计算机1702
									</div>
								</div>
							</div>
						</div>
						<div class="field">
							<button id="search-btn" class="ui mini blue basic button"><i class="search icon"></i>搜索</button>
						</div>
					</div>
				</form>
			</div>
			<table th:fragment="inf" id="table-container" class="ui celled table">
				<thead>
					<tr>
						<th>照片</th>
						<th>姓名</th>
						<th>学号</th>
						<th>班级</th>
						<th>密码</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="student,iterStat : ${page.content}">
						<td>
							<img src="../../static/images/avatar.png" th:src="@{${student.pictureUrl}}" style="width: 80px !important;">
						</td>
						<td th:text="${student.name}">王锦超</td>
						<td th:text="${student.sno}">170319170222</td>
						<td th:text="${student.grades}">计算1702</td>
						<td th:text="${student.password}">计算1702</td>
						<td>
							<a th:href="@{/infor/{id}/resetpwd(id=${student.id})}" class="ui mini basic blue button">重置密码</a>
							<a th:href="@{/infor/{id}/delete(id=${student.id})}" class="ui mini basic red button">删除</a>
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<th colspan="8">
								<div class="ui mini pagination menu" th:if="${page.totalPages}>1" >
									<a onclick="page(this)" th:attr="data-page=${page.number}-1" class="item" th:unless="${page.first}">上一页</a>
									<a onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item" th:unless="${page.last}">下一页</a>
								</div>
							<a th:href="@{/infor/input}" class="ui mini right floated basic blue button">新增</a>
						</th>
					</tr>
				</tfoot>
			</table>

		</div>



		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
		<script>
			$('.ui.dropdown').dropdown();

			function page(obj) {
				$("[name='page']").val($(obj).data("page"));
				//console.log($(obj).data("page"));
				loaddata();
			}

			$("#search-btn").click(function () {
				$("[name='page']").val(0);
				loaddata();
			});

			function loaddata() {
				$("#table-container").load(/*[[@{/infor/search}]]*/"/infor/search",{
					name : $("[name='name']").val(),
					sno : $("[name='sno']").val(),
					grades : $("[name='grades']").val(),
					page : $("[name='page']").val()
				});
			}
		</script>
	</body>
</html>
